<template>
	<div>
		<!-- 轮播 -->
		<van-swipe :autoplay="4000">
			<van-swipe-item v-for="(item,i) in carouselItems" :key="i" @click="onDetail(item)">
				<van-image :src="APIDomainName + item.img" width="100%" />
			</van-swipe-item>
		</van-swipe>

		<!-- 快捷入口 前端模板中写死-->
		<van-grid>
			<van-grid-item icon="/images/menu1.png" text="新闻资讯" to="/working" />
			<van-grid-item icon="/images/menu2.png" text="图片分享" to="/working" />
			<van-grid-item icon="/images/menu3.png" text="商品购买" to="/productList" />
			<van-grid-item icon="/images/menu4.png" text="留言反馈" to="/working" />
			<van-grid-item icon="/images/menu5.png" text="视频专区" to="/working" />
			<van-grid-item icon="/images/menu6.png" text="联系我们" to="/working" />

		</van-grid>

		<!-- 商品推荐 -->
		<homeProduct title="商品推荐" icon="gift-o" :productList="recommendedItems"></homeProduct>

		<!-- 新品到达 -->
		<homeProduct title="新品到达" icon="vip-card-o" :productList="newArrialItems"></homeProduct>

		<!-- 销售排行 -->
		<homeProduct title="销售排行" icon="award-o" :productList="topSaleItems"></homeProduct>
	</div>
</template>

<script>
	//导入封装后的接口	
	import { getHomeDataAPI } from "@/api/home.js";
	import homeProduct from "./components/homeProduct.vue"

	export default {
		components: {
			homeProduct
		},
		data() {
			return {
				// 轮播数据
				carouselItems: [],
				//商品推荐
				recommendedItems: [],
				//新品到达
				newArrialItems: [],
				// 销售排行
				topSaleItems: [],
			};
		},
		created() {
			//调用接口，获取首页轮播项数据	
			getHomeDataAPI().then(result => {
				console.log(result)
				this.carouselItems = result.data.carouselItems;
				this.recommendedItems = result.data.recommendedItems;
				this.newArrialItems = result.data.newArrialItems;
				this.topSaleItems = result.data.topSaleItems;
			}).catch(() => {});
		},
		methods: {
			onDetail(item) {
				this.$router.push({ name: 'productDetail', query: { id: item.product_id } })
			}
		}
	};
</script>

<style lang="less" scoped>
    // 在样式表顶部添加全局溢出控制
    div {
        overflow-x: hidden;  // 隐藏横向溢出内容
    }

	// 修改轮播图样式以实现自适应和居中
	.van-swipe {
		width: 90%; 
		height: 200px; 
		margin: 20px auto; 
		// 减小边框圆角大小，这里改成 15px，你可以按需调整
		border-radius: 15px; 
		box-shadow: 0 8px 16px rgba(255, 105, 180, 0.5); 
		animation: pulse 2s infinite; 

		.van-swipe-item {
			transition: transform 0.5s ease; 

			&:hover {
				transform: scale(1.05); 
			}
		}
	}

	// 修改快捷入口样式以在背景图中居中
	.van-grid {
		// 使用百分比宽度实现自适应
		width: 90%; 
		// 使用 flex 布局
		display: flex; 
		// 水平居中
		justify-content: center; 
		// 垂直居中
		align-items: center; 
		// 允许换行
		flex-wrap: wrap; 
		background: linear-gradient(45deg, #ffd700, #ff69b4); 
		padding: 30px; 
		border-radius: 20px; 
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
		// 确保在父容器中居中
		margin: 0 auto; 

		/deep/ .van-grid-item {
			background-color: rgba(255, 255, 255, 0.9); 
			border-radius: 15px; 
			margin: 10px; 
			transition: all 0.3s ease; 

			&:hover {
				transform: translateY(-5px); 
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); 
			}
		}

		/deep/ .van-grid-item__icon {
			font-size: 48px; 
			color: #ff1493; 
		}

		/deep/ .van-grid-item__text {
			color: #333; 
			font-size: 20px; 
			font-weight: bold; 
		}
	}

	// 商品模块样式大幅修改
	homeProduct {
		margin: 50px 15px;
		padding: 30px;
		border: 3px dashed #ff6347;
		border-radius: 25px;
		background: linear-gradient(135deg, #f0f8ff, #e6e6fa);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
		max-width: calc(100vw - 30px); // 添加最大宽度限制
		box-sizing: border-box; // 包含边框在宽度计算中

		&:hover {
			transform: rotate(1deg);
		}
	}
</style>